<template>
  <Layout :class="'bg-white p-2'">
    <!-- 第一层  添加按钮以及全局搜索框 -->
    <Row :class="'m-0'">
      <Col span="9">
        <div class="search">
          <Input
            search
            placeholder="按照名字模糊检索"
            v-model="name"
            :class="'w-90 m-2'"
          />
        </div>
      </Col>
      <Col span="2">
        <Button
          class="m-2 w-75 search-btn"
          type="primary"
          shape="circle"
          @click="search"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <!-- 第二层 -->
    <Row :class="'m-0'">
      <Col span="4">
        <Input :class="'w-75 m-2'" v-model="tel" placeholder="请输入联系电话" />
      </Col>
      <Col span="3">
        <Date-picker
          :class="'w-100 m-2'"
          type="datetime"
          placeholder="回访开始时间"
          @on-change="reservationDateStartTimechange"
        ></Date-picker>
      </Col>
      <div class="to">~</div>
      <Col span="3">
        <!-- v-model="backviewSearchEndTime" -->
        <Date-picker
          :class="'w-100 m-2'"
          type="datetime"
          placeholder="回访结束时间"
          @on-change="reservationDateEndTimechange"
        >
        </Date-picker>
      </Col>
    </Row>
    <!-- 第三层 -->
    <Row :class="'m-0'">
      <Col span="4">
        <i-col :class="'w-75 m-2'">
          <Select
            :disabled="this.selectAutorPermission"
            placeholder="请选择跟进人"
            v-model="searchAutor"
            filterable
            clearable
          >
            <Option v-for="item in autorList" :value="item.value"
              >{{ item.label }}
            </Option>
          </Select>
        </i-col>
      </Col>
      <Col span="4">
        <i-col :class="'w-75 m-2'">
          <Select
            placeholder="请选择添加人"
            v-model="searchCu"
            filterable
            clearable
          >
            <Option v-for="item in autorList" :value="item.value"
              >{{ item.label }}
            </Option>
          </Select>
        </i-col>
      </Col>
      <Col span="4">
        <i-col :class="'w-75 m-2'">
          <Select
            v-model="method"
            placeholder="请输入回访方式"
            filterable
            clearable
          >
            <Option v-for="item in backviewList" :value="item.value"
              >{{ item.label }}
            </Option>
          </Select>
        </i-col>
      </Col>
      <Col span="4">
        <i-col :class="'w-75 m-2'">
          <Select
            v-model="source"
            placeholder="请输入线索来源"
            filterable
            clearable
          >
            <Option v-for="item in orsourceList" :value="item.value"
              >{{ item.label }}
            </Option>
          </Select>
        </i-col>
      </Col>
    </Row>
    <Layout :class="'bg-white'">
      <Table
        border
        :class="'m-1'"
        :columns="tableInfo.columnInfo"
        :data="tableInfo.data"
      >
        <template slot-scope="{ row, index }" slot="status">
          <span v-if="row.statu">开</span>
          <span v-else>关</span>
        </template>

        <!--超文本连接-->
        <template slot-scope="{ row, index }" slot="studentName">
          <Row>
            <Col>
              <a @click="showPersonDetail(row)">{{ row.studentName }}</a>
            </Col>
          </Row>
        </template>

        <template slot-scope="{ row, index }" slot="action">
          <Row>
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="showBackviewDetail(row)"
              >详细</Button
            >
          </Row>
        </template>
      </Table>
      <!--分页-->
      <Page
        class="pages"
        :class="'m-2 text-right'"
        :page-size="tableInfo.size"
        @on-change="pageSearch"
        :total="tableInfo.total"
        :current="tableInfo.page"
        show-sizer
        @on-page-size-change="changeSize"
      />
    </Layout>
  </Layout>
</template>

<script>
export default {
  data() {
    let self = this
    return {
      selectAutorPermission: null,
      searchAutor: '',
      searchCu: '',
      des: '',
      method: '',
      autor: '',
      cu: '',
      source: '',
      name: '',
      tel: '',
      backviewSearchStartTime: '',
      backviewSearchEndTime: '',
      autorList: [],
      isSelectAutor: true,
      tableInfo: {
        currentPage: 1, //当前页
        size: 10, //每页条数
        total: 0, //总条数
        pageSize: 0, //总页数
        columnInfo: [
          //表头-----------------------------------
          {
            title: '#',
            width: 80,
            fixed: 'left',
            align: 'center',
            render: (h, params) => {
              return h(
                'span',
                params.index +
                  (self.tableInfo.currentPage - 1) * self.tableInfo.size +
                  1
              )
            },
          },
          {
            title: '学生姓名',
            slot: 'studentName', //Mock : studentName
          },
          {
            title: '回访人',
            key: 'autor',
          },
          {
            title: '回访类型',
            key: 'type',
          },
          {
            title: '线索来源',
            key: 'source',
          },
          {
            title: '回访日期',
            key: 'backviewDateTime',
          },
          {
            title: '回访方式',
            key: 'method',
          },
          {
            title: '从事工作',
            key: 'position',
          },
          {
            title: '回访描述',
            key: 'des',
          },
          {
            title: '回访结果',
            key: 'result',
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
          },
        ],
        data: [],
      },
      orsourceList: [
        { value: '58同城', label: '58同城' },
        { value: '智联招聘', label: '智联招聘' },
        { value: '前程无忧', label: '前程无忧' },
        { value: 'boss直聘', label: 'boss直聘' },
        { value: '拉勾网', label: '拉勾网' },
        { value: '51job', label: '51job' },
        { value: '其他', label: '其他' },
      ],
      backviewList: [
        { value: '电话回访', label: '电话回访' },
        { value: 'QQ回访', label: 'QQ回访' },
        { value: '微信回访', label: '微信回访' },
        { value: '邮件回访', label: '邮件回访' },
        { value: '其他', label: '其他' },
      ],
    }
  },
  methods: {
    showBackviewDetail: function(row) {
      this.$router.push({
        name: 'backview_detail',
        params: {
          row,
        },
      })
    },
    showPersonDetail: function(row) {
      this.$router.push({
        name: 'student_detail',
        params: {
          row,
        },
      })
    },
    reservationDateStartTimechange(startDatetime) {
      this.backviewSearchStartTime = startDatetime
    },
    reservationDateEndTimechange(endDatetime) {
      this.backviewSearchEndTime = endDatetime
    },
    init: function() {
      this.$data.tableInfo.currentPage = 1
      let _this = this
      this.http
        .get({
          url: '/backview/list', //ajax
          param: {
            page: this.$data.tableInfo.currentPage, //默认第一页
            size: this.$data.tableInfo.size, //默认每页10条
          },
        })
        .then((data) => {
          var POJOList = new Array()
          data.list.forEach((list) => {
            //外层循环
            let userList = JSON.parse(localStorage.getItem('USER_LIST'))
            let autorName = null
            userList.forEach((user) => {
              if (user.userId == list.backview.autor) {
                autorName = user.nickName
              }
            })
            let POJO = {
              result: list.backview.result,
              backviewId: list.backview.id,
              studentName: list.student.name,
              autor: autorName,
              des: list.backview.des,
              backviewDateTime: list.backview.dateTime,
              method: list.backview.method,
              source: list.resource.source,
              position: list.resource.csgz,
              studentId: list.student.id,
              type: list.backview.type,
              autorId: list.backview.autor,
            }
            POJOList.push(POJO)
          }) //外层循环

          this.$data.tableInfo.currentPage = data.page //当前页
          this.$data.tableInfo.total = data.total //一共多少数据
          this.$data.tableInfo.size = data.size //每页多少条
          this.$data.tableInfo.pageSize = data.totalPage //一共多少页
          this.$data.tableInfo.data = POJOList
        })
    },
    search: function() {
      this.$data.tableInfo.currentPage = 1
      var _this = this

      if (_this.searchAutor == undefined) {
        _this.searchAutor = ''
      }

      if (_this.searchCu == undefined) {
        _this.searchCu = null
      }

      if (_this.method == undefined) {
        _this.method = null
      }

      if (_this.source == undefined) {
        _this.source = null
      }

      let backviewSearchStartTimea = _this.backviewSearchStartTime
      let backviewSearchEndTimea = _this.backviewSearchEndTime

      if (backviewSearchStartTimea == '') {
        backviewSearchStartTimea = null
      }

      if (backviewSearchEndTimea == '') {
        backviewSearchEndTimea = null
      }
      this.http
        .get({
          url: '/backview/list', //ajax
          param: {
            page: this.$data.tableInfo.currentPage,
            size: this.$data.tableInfo.size,
            'backview.des': _this.des,
            'backview.result': _this.result,
            'backview.method': _this.method,
            'backview.autor': ' ' + _this.searchAutor,
            'backview.cu': _this.searchCu,
            'resource.source': _this.source,
            'student.name': _this.name,
            'student.tel': _this.tel,
            backviewSearchStartTime: backviewSearchStartTimea,
            backviewSearchEndTime: backviewSearchEndTimea,
          },
        })
        .then((data) => {
          var POJOList = new Array()

          data.list.forEach((list) => {
            //外层循环
            let userList = JSON.parse(localStorage.getItem('USER_LIST'))
            let autorName = null

            userList.forEach((user) => {
              if (user.userId == list.backview.autor) {
                autorName = user.nickName
              }
            })
            let POJO = {
              result: list.backview.result,
              result: list.backview.result,
              backviewId: list.backview.id,
              studentName: list.student.name,
              autor: autorName,
              des: list.backview.des,
              backviewDateTime: list.backview.dateTime,
              method: list.backview.method,
              source: list.resource.source,
              position: list.resource.csgz,
              studentId: list.student.id,
              type: list.backview.type,
              autorId: list.backview.autor,
            }
            POJOList.push(POJO)
          }) //外层循环

          this.$data.tableInfo.currentPage = data.page
          this.$data.tableInfo.total = data.total
          this.$data.tableInfo.size = data.size
          this.$data.tableInfo.pageSize = data.totalPage
          this.$data.tableInfo.data = POJOList
        })
    },
    changeSize: function(changeSize) {
      this.$data.tableInfo.size = changeSize
    },
    pageSearch: function(changedPage) {
      var _this = this

      if (_this.searchAutor == undefined) {
        _this.searchAutor = ''
      }

      if (_this.searchCu == undefined) {
        _this.searchCu = null
      }

      if (_this.method == undefined) {
        _this.method = null
      }

      if (_this.source == undefined) {
        _this.source = null
      }

      let backviewSearchStartTimea = _this.backviewSearchStartTime
      let backviewSearchEndTimea = _this.backviewSearchEndTime

      if (backviewSearchStartTimea == '') {
        backviewSearchStartTimea = null
      }

      if (backviewSearchEndTimea == '') {
        backviewSearchEndTimea = null
      }

      this.$data.tableInfo.currentPage = changedPage
      this.http
        .get({
          url: '/backview/list', //ajax
          param: {
            page: this.$data.tableInfo.currentPage,
            size: this.$data.tableInfo.size,
            'backview.des': _this.des,
            'backview.result': _this.result,
            'backview.method': _this.method,
            'backview.autor': ' ' + _this.autor,
            'backview.cu': _this.cu,
            'resource.source': _this.source,
            'student.name': _this.name,
            'student.tel': _this.tel,
            backviewSearchStartTime: backviewSearchStartTimea,
            backviewSearchEndTime: backviewSearchEndTimea,
          },
        })
        .then((data) => {
          var POJOList = new Array()

          data.list.forEach((list) => {
            //外层循环
            let userList = JSON.parse(localStorage.getItem('USER_LIST'))
            let autorName = null

            userList.forEach((user) => {
              if (user.userId == list.backview.autor) {
                autorName = user.nickName
              }
            })
            let POJO = {
              result: list.backview.result,
              result: list.backview.result,
              backviewId: list.backview.id,
              studentName: list.student.name,
              autor: autorName,
              des: list.backview.des,
              backviewDateTime: list.backview.dateTime,
              method: list.backview.method,
              source: list.resource.source,
              position: list.resource.csgz,
              studentId: list.student.id,
              type: list.backview.type,
              autorId: list.backview.autor,
            }
            POJOList.push(POJO)
          }) //外层循环

          this.$data.tableInfo.currentPage = data.page
          this.$data.tableInfo.total = data.total
          this.$data.tableInfo.size = data.size
          this.$data.tableInfo.pageSize = data.totalPage
          this.$data.tableInfo.data = POJOList
        })
    },
    remove: function(pId) {
      this.message.confirm({
        title: '删除提示',
        content: '即将删除权限，确定吗？',
        onOk: () => {
          this.http
            .delete({
              url: '/backview/delete', //删除url 待定......
              param: {},
            })
            .then((data) => {
              this.search()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
  },
  created: function() {
    this.init()
    let userList = JSON.parse(localStorage.getItem('USER_LIST'))
    userList.forEach((user) => {
      let u = {
        value: user.userId,
        label: user.nickName,
      }
      this.autorList.push(u)
    })

    let distributionCount = 0

    let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))

    //判断该用户是否有 "可分配" 权限!
    for (let item in currentUser.permissions) {
      for (let jItem in currentUser.permissions[item].permissions) {
        if (currentUser.permissions[item].permissions[jItem].name == '可分配') {
          //如果登录的角色有"可分配权限!"
          distributionCount++
        }
      }
    }

    if (distributionCount >= 1) {
      this.selectAutorPermission = false //有 "可分配"权限 就把 "选择跟进人这一项开启"
    } else {
      this.selectAutorPermission = true //没有 "可分配"权限  就把 "选择跟进人这一项关闭"
    }
  },
}
</script>

<style scoped>
.to {
  padding: 10px 20px 0px 40px;
}
.search {
  margin-right: 5px;
}
</style>
